<svelte:component>

Posted on 2023-04-25 by

henrikvilhelmberglund

Sometimes you may want to show a certain component depending on some condition. You can do so with an if block:

I am Bar 
<script>
	import Foo from "./Foo.svelte";
	import Bar from "./Bar.svelte";

	let value = 0;
</script>

<input type="number" name="" bind:value id="" />

{#if value > 50}
	<Foo bind:value a="a" b="b" c="c" />
{:else}
	<Bar bind:value a="a" b="b" c="c" />
{/if}

<style>
</style>

This is a bit annoying though because we want to use the same props but have to have them in two (or more) places, not very DRY compliant. We could do something like create a variable with an object for the props and spread them, but it's still not ideal because we still have to repeat the bind: and so on.

There is a better way: svelte:component . By using this special Svelte element we can pass in a this value with the component we want.

I am Bar 
<script>
	import Foo from "./Foo.svelte";
	import Bar from "./Bar.svelte";

	let value = 0;
</script>

<input type="number" name="" bind:value id="" />

<!-- "this" takes in the component -->
<svelte:component this={value > 50 ? Foo : Bar} bind:value a="a" b="b" c="c" />

<style>
</style>

We could even do something like this where we have a reactive statement that sets the component.

Note that passing in null or undefined will effectively hide the component.
I am Bar 
<script>
	import Foo from "./Foo.svelte";
	import Bar from "./Bar.svelte";

	let value = 0;

	$: component = value > 210 ? null : value > 50 ? Foo : Bar;
</script>

<input type="number" name="" bind:value id="" />

<!-- "this" takes in the component -->
<svelte:component this={component} bind:value a="a" b="b" c="c" />

<style>
</style>